<template>
	<view class="custom-item">
		<view class="comment-item">
	    	<image :src="imageSrc" class="profile-img" 
			  mode="aspectFill" 
			  @error="onImageError"
			 
			 />
	        <view class="comment-info">
				<view class="isAuthorOrUsername">
					<span class="comment-author">{{ item.username }}</span> <!-- 显示评论者的用户名 -->
					<view class="isAuthor" v-if="authorInfo.userId === item.userId">up</view> <!-- 如果评论者是文章作者，显示“up” -->
				</view>
	            <view class="comment-meta">
	                <text class="comment-time">{{ item.createdAt }}</text> <!-- 显示评论时间 -->
	                <text class="comment-ip">IP: {{ item.userIp }}</text> <!-- 显示评论者的 IP 地址 -->
	            </view>
			  
			  <view v-if="isNeedReplyComtent">
	          	<text class="main-comment-content comment-text" :data-comment-id="item.id" 
			  		@click="sendComment"
			  		:style="{ maxHeight: item.isFolded ? item.height + 'px' : '132px' }">
			  		{{ item.commentText }}</text> <!-- 显示评论内容，支持折叠 -->
			  		<view v-if="item.isDisplayFoldAndUnfold" @click="toggleFoldAndUnfold(item.id)" class="toggleCommentFoldAndUnfold">
				        {{ item.isFolded ? '收起' : '展开' }} <!-- 根据状态显示“收起”或“展开” -->
			  			<view class="arrow-icon" :style="{ transform: `rotate(${item.isFolded ? 0 : 180}deg)` }"></view> <!-- 箭头图标，根据折叠状态旋转 -->
			  		</view>
			  </view>
			  <view v-else>
				  <text class="main-comment-content comment-text" 
					  @click="sendComment"
					  :style="{ maxHeight: '9999px' }">
					  {{ item.commentText }}</text> <!-- 显示评论内容，始终展开 -->
			  </view>
			  
			  <!-- 回复列表 -->
			   <view class="view-replies" v-if="item.replyCount > 0 && isNeedReplyComtent">
			          <view class="replies">
			              <view v-for="(reply, index) in displayedReplies" :key="reply.id" class="reply">
						      <text class="only-username" v-if="!isAuthor(reply) && !isNotUserReply(reply)">{{ reply.username }}:</text>
						      <text class="username" v-else>{{ reply.username }}</text>
			                  <text class="isAuthor" v-if="isAuthor(reply)">up</text> <!-- 如果回复者是文章作者，显示“up” -->
			                  <text v-if="isNotUserReply(reply)" class="reply-text"> 回复 </text> <!-- 如果不是用户的回复，显示“回复” -->
							  <text class="reply_name" v-if="isNotUserReply(reply)">  @{{ reply.replyToName }}:</text> <!-- 显示回复的对象名称 -->
							  <text class="reply_content">{{ reply.commentText }}</text> <!-- 显示回复内容 -->
			              </view>
			          </view>
			          <view class="view-more" @click="toggleReplyPanel">
			              查看{{ item.replyCount }}条回复 <!-- 显示回复数量，点击查看更多 -->
			          </view>
			      </view>
			  
	          <view class="comment-icons">
	            <view class="left-icons">
	              <view class="like" @click="toggleCommentLike(item.id)">
	                <image class="iconfont icon-renke" 
	                       :class="{ 'active': item.isLiked === 1, 'success': item.animationTriggered && item.isLiked === 1 }">
	                </image>
	                {{ item.likesCount === 0 ? '赞' : item.likesCount }} <!-- 显示点赞数 -->
	              </view>
	              <image class="iconfont icon-burenke" 
	                     :class="{ 'disLike': item.isLiked === 2, 'success': item.animationTriggered && item.isLiked === 2 }" 
	                     @click="toggleCommentDisLike(item.id)">
	              </image>
				   <image class="iconfont icon-pinglun1" @click="sendComment"></image> <!-- 点击评论图标 -->
	              <image class="iconfont icon-fenxiang"></image> <!-- 分享图标 -->
	            </view>
	            <view class="right-icon">
	              <image class="iconfont icon-weibiaoti5" @click="openCommentPopup"></image> <!-- 点击打开评论选项框 -->
	            </view>
	          </view><!-- comment-icons -->
	        </view>
		</view><!-- comment-item -->
	</view>
</template>

<script>
	export default {
		name: "comment-item-xhd", // 组件名称
		props: {
		    item: {
		      type: Object,
		      required: true, // 必须传入评论对象
		    },
			isReply: {
				type: Boolean,
				default: false // 默认不是回复
			},
			isNeedReplyComtent: {
				type: Boolean,
				default: true // 默认需要显示回复内容
			},
			isMainComment: {
				type: Boolean,
				default: false // 默认不是主评论
			},
			authorInfo: {
			    type: Object,
			    required: true // 必须传入作者信息
			},
			myInfo: {
				type: Object,
				required: true, // 必须传入用户信息
			},
		},
		data() {
			return {
				imageSrc:this.item.profileImage,
				defaultImage:'/static/img/default-avatar.jpeg', // 默认头像路径
			};
		},
		computed: {
			displayedReplies() {
				// 只显示前两个回复
				return this.item.replies.slice(0, 2);
			},
			isAuthor() {
				// 判断是否是作者
				return (reply) => {
					return reply.userId === this.authorInfo.userId;
				};
			},
			isNotUserReply() {
				// 判断回复是否不是用户的回复
				return (reply) => {
					return reply.replyToId !== this.item.userId;
				};
			},
		},
		methods: {
			toggleFoldAndUnfold(id) {
				// 触发折叠和展开事件
				this.$emit("toggleFoldAndUnfold", id);
			},
			toggleCommentLike(commentId) {
				// 处理点赞逻辑
				this.$emit('like', commentId, this.isReply);
			},
			toggleCommentDisLike(commentId) {
				// 处理点踩逻辑
				this.$emit('dislike', commentId, this.isReply);
			},
			handleRemove() {
				// 触发删除事件
				this.$emit('remove', this.item.id, this.isReply);
			},
			checkCommentTextHeight(commentId) {
				// 检查评论文本的高度，判断是否需要折叠
				const lineHeight = 22; // 可配置的行高 22px
				const maxLines = 6; // 最大行数
				const query = uni.createSelectorQuery().in(this);
				query.select(`.comment-text[data-comment-id="${commentId}"]`).boundingClientRect(data => {
					if (data && data.height) {
						const actualHeight = data.height; // 获取实际高度
						const maxHeight = lineHeight * maxLines; // 计算最大允许高度
						if (actualHeight > maxHeight) {
							// 发出事件将信息传递给父组件
							this.$emit('update-comment-fold-unfold', {
							  id: commentId,
							  actualHeight: actualHeight,
							  isFolded: false, // true if folded
							});
						}
					} else {
						console.warn('无法获取元素高度');
					}
				}).exec();
			},
			sendComment() {
				// 触发发送评论事件
				this.$emit('getRplyMsg', this.item);
			},
			toggleReplyPanel() {
				// 唤醒回复面板
				this.$emit("toggleReplyPanel", this.item);
			},
			openCommentPopup() {
				// 打开评论选项框
				this.$emit('openCommentPopup', this.item, this.isReply, this.isMainComment);
			},
			// 处理图片加载失败的情况
			onImageError(event) {
			     this.imageSrc = this.defaultImage; // 图片加载失败时设置为默认图片
			 }
		},
		onLoad() {
			// 组件加载时的逻辑
		},
		mounted() {
			// 组件挂载后检查评论文本高度
			if (this.isNeedReplyComtent) {
				this.$nextTick(() => {
					this.checkCommentTextHeight(this.item.id);
				});
			}
		}
	}
</script>

<style lang="scss">
	.custom-item {
	  background-color: white; /* 背景颜色 */
	  padding: 10px; /* 内边距 */
	  border-bottom: 1rpx solid #ccc; /* 底部边框 */
	}
	.comment-item {
	  display: flex; /* 使用 Flexbox 布局 */
	  align-items: flex-start; /* 垂直对齐方式 */
	
	  .profile-img {
	    width: 42px; /* 头像宽度 */
	    height: 42px; /* 头像高度 */
	    border-radius: 50%; /* 圆形头像 */
	    margin-right: 10px; /* 右边距 */
	  }
	
	  .comment-info {
	    flex: 1; /* 使信息部分占据剩余空间 */
		
		.isAuthorOrUsername {
			display: flex; /* 使用 Flexbox 布局 */
			align-items: center; /* 垂直对齐方式 */
			.comment-author {
				font-size: 14px; /* 用户名字体大小 */
			}
			.isAuthor {
				background-color: #ADD8E6; /* 背景颜色 */
				color: white; /* 字体颜色 */
				border-radius: 5px; /* 圆角效果 */
				padding: 2px 5px; /* 内边距 */
				font-weight: bold; /* 加粗 */
				margin-right: 5px; /* 与用户名之间的间距 */
				margin-left: 5px; /* 与用户名之间的间距 */
				font-size: 12px; /* 字体大小 */
			}
		}
	    
	    .comment-meta {
	      display: flex; /* 使用 Flexbox 布局 */
	      font-size: 12px; /* 字体大小 */
	      color: #888; /* 字体颜色 */
	
	      .comment-time {
	        margin-right: 10rpx; /* 时间与下一个元素的间距 */
	      }
	    }
	
		.comment-text {
			margin: 10rpx 0; /* 上下外边距 */
			padding: 0 10rpx; /* 左右内边距 */
			overflow: hidden; /* 隐藏超出部分 */
			text-overflow: ellipsis; /* 超出部分用省略号表示 */
			line-height: 22px; /* 行高 */
			display: -webkit-box; /* 使用 Flexbox */
			-webkit-box-orient: vertical; /* 垂直排列 */
		}

		.toggleCommentFoldAndUnfold {
		  display: flex; /* 使用 Flexbox 布局 */
		  align-items: center; /* 垂直对齐方式 */
		  cursor: pointer; /* 鼠标悬停时显示为可点击 */
		  color: #0056b3; /* 字体颜色 */
		  .arrow-icon {
		    display: inline-block; /* 行内块元素 */
		    margin-left: 5px; /* 箭头与文字之间的间距 */
		    width: 0; 
		    height: 0; 
		    border-left: 5px solid transparent; /* 左边框透明 */
		    border-right: 5px solid transparent; /* 右边框透明 */
		    border-bottom: 9px solid; /* 下边框 */
		    transition: transform 0.3s; /* 旋转过渡效果 */
		  }
		}
		.view-replies {
		    margin: 10px 0; /* 上下外边距 */
		    padding: 10px; /* 内边距 */
		   // border: 1px solid #e0e0e0; /* 边框 */
		    border-radius: 5px; /* 圆角效果 */
		    background-color: #f9f9f9; /* 背景颜色 */
		}
		
		.replies {
		    margin-top: 5px; /* 上外边距 */
			.reply {
				overflow: hidden; /* 隐藏超出部分 */
				text-overflow: ellipsis; /* 超出部分用省略号表示 */
				line-height: 22px; /* 行高 */
				display: -webkit-box; /* 使用 Flexbox */
				-webkit-box-orient: vertical; /* 垂直排列 */
				-webkit-line-clamp: 3; /* 限制显示行数为3 */
				align-items: center; /* 垂直对齐方式 */
				padding: 5px 0; /* 上下内边距 */
				.username {
				   font-size: 16px; /* 用户名字体大小 */
				   color: #007bff; /* 用户名颜色 */
				}
				.only-username {
					font-size: 16px; /* 只显示用户名的字体大小 */
					color: #007bff; /* 只显示用户名的颜色 */
					margin-right: 5px; /* 右边距 */
				}
				.isAuthor {
					background-color: #ADD8E6; /* 背景颜色 */
					color: white; /* 字体颜色 */
					border-radius: 5px; /* 圆角效果 */
					padding: 2px 5px; /* 内边距 */
					font-weight: bold; /* 加粗 */
					margin-right: 5px; /* 与用户名之间的间距 */
					margin-left: 5px; /* 与用户名之间的间距 */
					font-size: 12px; /* 字体大小 */
				}
				.reply-text {
				    margin: 0 5px; /* 左右外边距 */
				    color: #666; /* 字体颜色 */
				}
				
				.reply_name {
				    color: #007bff; /* 回复对象名称颜色 */
				}
				.reply_content {
				    color: #555; /* 回复内容颜色 */
				}
			}
		}
		.view-more {
		    margin-top: 5px; /* 上外边距 */
			font-size: 14px; /* 字体大小 */
		    color: #007bff; /* 字体颜色 */
		    cursor: pointer; /* 鼠标悬停时显示为可点击 */
		}
	  }
	
	  .comment-icons {
	    display: flex; /* 使用 Flexbox 布局 */
	    justify-content: space-between; /* 在主轴上分配空间 */
	    align-items: center; /* 垂直居中对齐 */
	    margin-top: 20rpx; /* 上外边距 */
	    margin-bottom: 20rpx; /* 下外边距 */
	
	    .iconfont {
	      text-align: center; /* 图标居中 */
	      font-size: 40rpx; /* 字体大小 */
	      height: 40rpx; /* 高度 */
	      width: 40rpx; /* 宽度 */
	      line-height: 40rpx; /* 行高 */
	      margin-right: 10rpx; /* 右边距 */
	      transition: color 0.2s, transform 0.2s; /* 动画效果 */
	    }
	
	    .left-icons {
	      display: flex; /* 使用 Flexbox 布局 */
	      align-items: center; /* 垂直对齐方式 */
	      min-width: 300rpx; /* 最小宽度 */
	      gap: 25rpx; /* 图标之间的间距 */
	
	      .like {
	        display: flex; /* 使用 Flexbox 布局 */
	        align-items: center; /* 垂直对齐方式 */
	
	        .iconfont.active {
	          color: red; /* 点赞时的颜色 */
	        }
	
	        .iconfont.success {
	          animation: likeAnimation 0.5s; /* 点赞动画 */
	        }
	
	        @keyframes likeAnimation {
	          0% {
	            transform: scale(1); /* 初始状态 */
	          }
	          50% {
	            transform: scale(1.2); /* 放大状态 */
	          }
	          100% {
	            transform: scale(1); /* 结束状态 */
	          }
	        }
	      }
	
	      .iconfont.disLike {
	        color: #0056b3; /* 点踩时的颜色 */
	      }
	
	      .iconfont.success {
	        animation: likeAnimation 0.5s; /* 点踩动画 */
	      }
	    }
	
	    .right-icon {
	      margin-right: 10rpx; /* 右边距 */
	    }
	  }
	}
</style>
